<template>
  <el-upload
    v-bind="$attrs"
    v-on="$listeners"
    class="upload-demo"
    :httpRequest="uploadFile"
    action="/"
    multiple
    :file-list="fileList"
    :before-remove="beforeRemove"
    :before-upload="breforeUpload"
    :on-remove="removeFile"
    :on-preview="getFile"
    :disabled="disabled"
    :accept="acceptValue"
    ref="elupload"
    :limit="limit"
    :readonly="readonly"
  >
    <el-button
      :readonly="readonly"
      size="small"
      :disabled="disabled || limit == fileList.length"
      type="primary"
      :loading="loading"
      >{{ loading ? "上传中" : "点击上传" }}</el-button
    >
  </el-upload>
</template>

<script>
import { uploadFileUploadFile as uploadApi } from "@/api";
import {
  fileTypeValidate,
  acceptValue,
  isImg
} from "@/utils/fileTypeValidation";
import baseUrl from "@/api/request/url";
import { downloadPdf } from "@/utils/download";
import { is } from "@babel/types";
export default {
  name: "FormListImageFile",
  props: {
    value: {
      type: Array,
      default: []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    limit: {
      type: Number,
      default: 30
    },
    maxSize: {
      type: Number,
      default: 100
    },
    isFileAccept: {
      type: Boolean,
      default: false
    },
    acceptList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      acceptValue,
      isImg,
      msg: "",
      loading: false,
      failed: false
    };
  },
  computed: {
    fileList() {
      return this.files.map(item => {
        return {
          url: baseUrl + item,
          name: item.slice(item.lastIndexOf("/") + 1, item.length)
        };
      });
    },
    files: {
      get() {
        return this.value.map(item => {
          return item;
        });
      },
      set(e) {
        this.$emit("input", e);
      }
    },
    tips() {
      if (!this.value) {
        return true;
      }
      return false;
    }
  },
  methods: {
    setValue(e) {
      return e.map();
    },
    showTips(e) {
      e.preventDefault();
      //
    },
    getFile(e) {
      if (e.url.indexOf(".pdf") > -1) {
        downloadPdf(e.name, e.url);
        return;
      }
      window.open(e.url);
    },
    async uploadFile(e) {
      //   this.files = [...this.files];
      const type = fileTypeValidate(e.file.name);
      this.loading = true;
      const formData = new FormData();
      formData.append("files", e.file);
      //   formData.append("type", type);
      try {
        let res = await uploadApi(formData);
        this.files.push(res.data[0]);
      } catch (error) {
        this.$refs.elupload.tempIndex -= 1;
      }
      this.files = [...this.files];
      this.loading = false;
    },
    getFileExtension(filename) {
      var lastIndex = filename.lastIndexOf(".");
      if (lastIndex != -1) {
        return filename.substring(lastIndex + 1);
      } else {
        return "";
      }
    },
    breforeUpload(file) {
      if (this.acceptList?.length) {
        this.failed = true;
        let nowType = this.getFileExtension(file.name.toLowerCase());
        console.log(nowType);
        if (!this.acceptList.includes(nowType)) {
          this.$notified.error({
            message: "上传失败，不支持的文件类型"
          });
        }
        return this.acceptList.includes(nowType);
      }
      if (file.size / 1024 / 1024 > this.maxSize) {
        this.failed = true;
        this.$notified.error({
          message: "上传失败,文件大小限制" + this.maxSize + "M以内"
        });
        return false;
      }
      const type = fileTypeValidate(file.name);
      if (!type || (this.type && type !== this.type)) {
        this.failed = true;
        this.$notified.error({
          message: "上传失败，不支持的文件类型"
        });
      }
      return Boolean(type);
    },
    beforeRemove(file, fileList) {
      if (this.failed) {
        this.failed = false;
        return;
      }
      return this.$confirm(`确定移除 ？`);
    },
    removeFile(e) {
      this.files = this.files.filter(i => {
        return e.url.indexOf(i) == -1;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.buttonDisabled {
  &::v-deep {
    & > div {
      display: none;
    }
  }
}
</style>
